<template>
  <div class="zhts-menu">
    <h2 class="zhts-title">
      <!-- <div class="logo"></div> -->
      <span class="text">{{titleName}}</span>
    </h2>
    <mars-menu class="menu-info">
      <template v-for="(menu, i) in zhtsMenu" :key="i">
        <mars-menu-item v-if="!menu.children && !menu.menus" @click="selectMenu(menu)">
          <template v-if="menu.icon" #icon>
            <mars-icon :icon="menu.icon" width="20"></mars-icon>
          </template>
          <span>{{ menu.name }}</span>
        </mars-menu-item>

        <mars-sub-menu v-else>
          <template v-if="menu.icon" #icon>
            <mars-icon :icon="menu.icon" width="20"></mars-icon>
          </template>
          <template #title>
            <span>{{ menu.name }}</span>
          </template>
          <template v-if="menu.children">
            <mars-menu-group v-for="(sub, j) in menu.children" :key="j" :title="sub.name">
              <template v-if="sub.icon" #icon>
                <mars-icon :icon="sub.icon" width="18"></mars-icon>
              </template>
              <mars-menu-item v-for="(m, k) in sub.menus" :key="k" @click="selectMenu(m)">{{ m.name }}</mars-menu-item>
            </mars-menu-group>
          </template>

          <template v-if="menu.menus">
            <mars-menu-item v-for="(m, k) in menu.menus" :key="k" @click="selectMenu(m)">
              <template v-if="m.icon" #icon>
                <mars-icon :icon="m.icon" width="18"></mars-icon>
              </template>
              <span>{{ m.name }}</span>
            </mars-menu-item>
          </template>
        </mars-sub-menu>
      </template>
    </mars-menu>
    <mars-menu class="login-Item">
      <mars-sub-menu placement="middle">
        <template #icon>
          <mars-icon class="login-icon" icon="user" width="28"></mars-icon>
        </template>
        <template #title></template>
        <mars-menu-item>
          <span>{{ userName }}</span>
        </mars-menu-item>
        <!--
        <mars-menu-item @click="changeStyle">
          <span>
            <span>切换皮肤</span>
          </span>
        </mars-menu-item> -->

        <mars-menu-item @click="logOut">
          <span>
            <span>退出</span>
            <mars-icon class="login-out" icon="logout" width="16"></mars-icon>
          </span>
        </mars-menu-item>
      </mars-sub-menu>
    </mars-menu>
  </div>
  <div class="zhts-container">
    <main-view @mapLoaded="mapLoaded" :mapOptions="mapOptions"/>
  </div>
</template>

<script setup lang="ts">
import MainView from "@mars/components/mars-work/main-view.vue"
import { onMounted, ref } from "vue"
import { useWidget } from "@mars/common/store/widget"
import localforage from "localforage"
import { loginOut } from "@mars/common/api"
import { $message } from "@mars/components/mars-ui"
import { getMenuConfig } from "./menus" // 引入菜单配置函数
import { useUserStore } from "@mars/common/store/user"
import { to } from "await-to-js"
import router from "@mars/router"

const { activate, disableAll } = useWidget()
const titleName = import.meta.env.VITE_APP_TITLE

const userStore = useUserStore()
const mapOptions = {
  // 加载底图
}

interface ZhztMenu {
  name: string
  icon?: any
  callback?: () => void
  children?: ZhztMenu[]
  menus?: ZhztMenu[]
  data?: any
  layerId?: number | number[]
  widget?: string
  autoDisable?: boolean
}

let mapInstance: any = null
const zhtsMenu = ref<ZhztMenu[]>([])
function mapLoaded(map: any) {
  mapInstance = map

  // 确保地图加载完成后再初始化菜单
  zhtsMenu.value = getMenuConfig({ 
    mapInstance, 
    activate, 
    disableAll 
  })
}

const userName = ref()
localforage.getItem("userName").then((user: string) => {
  userName.value = user || "苏衡声"
})

const selectMenu = (menu: ZhztMenu) => {
  if (menu.callback) {
    menu.callback()
  }
  if (menu.widget) {
    const widgetOption: any = {
      name: menu.widget
    }
    if (menu.data) {
      widgetOption.data = {
        ...menu.data
      }
    }
    activate(widgetOption)
  }
}

const logOut = async () => {
  await to(userStore.dispatch("logout"))
  await router.push({ path: "/login" })
}

// const changeStyle = () => {
//   const dataset = document.documentElement.dataset
//   dataset.theme = dataset.theme === "dark" ? "light" : "dark"
// }

onMounted(() => {
  zhtsMenu.value = getMenuConfig({
    mapInstance: null,
    activate,
    disableAll
  })
})
</script>

<style scoped lang="less">
.zhts-menu {
  height: 70px;
  //background-image: var(--zhts-title-bimage);
  //background-size: 100% 100%;
  //background-repeat: no-repeat;
  background-color: var(--zhts-title-bcolor);
  z-index: 1000;
  display: flex;
  .menu-info{
    width: 100%;
    overflow: hidden;
  }
  .login-Item {
    float: right;
    width: 100px;
    :deep(.mars-menu-icon) {
      padding: 0 12px;
    }
    :deep(.sub-menu-content) {
      transform: none;
    }
    :deep(.mars-menu-item) {
      min-width: 100%;
    }
  }
}
.zhts-title {
  display: inline-block;
  height: 70px;
  width: 460px;
  background-image: var(--zhts-title-img);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  color: #ffffff;
  text-shadow: 0px 2px 6px #123756;
  text-align: center;
  .logo {
    width: 70px;
    height: 70px;
    margin-left: 10px;
    display: inline-block;
    background: url("@mars/components/mars-ui/assets/images/logo.png");
    background-size: 120% 120%;
    background-repeat: no-repeat;
    background-position: -5px -5px;
  }
  .text {
    font-size: 25px;
    line-height: 70px;
    font-weight: bold;
    vertical-align: top;
  }
}
.zhts-logo {
  width: 40px;
  margin-left: 10px;
  vertical-align: middle;
}
.zhts-container {
  height: calc(100% - 70px);
}
.login-out {
  margin-left: 10px;
  vertical-align: sub;
}
.login-icon {
  position: relative;
  top: 7px;
}
</style>
